Skip to main content

Resumen de la Sintaxis de HubL (HubSpot Markup Language)

HubL es el lenguaje de marcado (no de programacion) utilizado por el CMS de HubSpot, basado en Jinjava y diseñado específicamente para la plataforma. A continuación, se presentan los conceptos básicos de la sintaxis de HubL:

Delimitadores​

HubL se integra en HTML usando símbolos especiales:

  • {% %} para declaraciones (no imprimen nada). Sirven para escribir variables, usar modulos, condicionales, lops y demas.
{% set blog_title = isEnglish ? "Our Blog" : "Nuestro Blog" %}
  • {{ }} para expresiones (imprimen valores).
<h1 class="blog-index-header__title">{{ blog_title }}</h1>
  • {# #} para comentarios.
{# Este es un comentario #}

Módulos​

Los módulos son áreas dinámicas de una plantilla que pueden personalizarse en el editor de contenido. Contienen una parte para HTML, CSS y JS

<section class="blog-index-header">
  <div class="content-wrapper content-wrapper--narrow">
    {% if module.title %}
      <h1 class="blog-index-header__title">{{ module.title }}</h1>
    {% else %}
      <h1 class="blog-index-header__title">{{ group.public_title }}</h1>
    {% endif %}
    {% if module.subtitle %}
      <p class="blog-index-header__subtitle">{{ module.subtitle }}</p>
    {% else %}
      <p class="blog-index-header__subtitle">{{ group.description }}</p>
    {% endif %}
  </div>
</section>

Variables y Macros​

HubL permite definir variables y macros para reutilizar código. Las macros son útiles para repetir bloques de código con valores dinámicos. No se usaron.

{% set primaryColor = '#F7761F' %} {# defines variable and assigns HEX color #}
        
a {
  color: {{ primaryColor }}; {# prints variable HEX value #}
}


{% macro trans(value) %} 
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}

a {
  {{ trans("all .2s ease-in-out") }}
}

Condicionales y Bucles​

HubL permite el uso de:

  • Condicionales: Declaraciones if, endif, else.
{% if tag %}
    <p>Posts about:</p>
    <h2>{{ page_meta.html_title|split(' | ')|last }}</h2>
{% endif %}
  • Bucles: for para iterar sobre secuencias de datos.
{% for tag in content.tag_list %}
    <a class="blog-tag" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}

Otras Características​

  • Escapar delimitadores: Para usar un delimitador de HubL en otro lenguaje.
  • Incluir archivos: Posibilidad de incluir múltiples archivos .html dentro de una plantilla de HubL.
  • Bloques: Crear bloques que extienden plantillas principales.

Esta guía proporciona una visión general de la sintaxis y las capacidades de HubL para facilitar el desarrollo de plantillas en HubSpot.